<script setup>
import { ref, watch } from 'vue'

const leftCardW = ref(15)
const centerCardW = ref(39)
const rightCardW = ref(20)
const videoList = ref([])
watch(
  [leftCardW, rightCardW],
  ([l, r]) => {
    centerCardW.value = 100 - l - r - 1
    // console.log(centerCardW.value, l, r)
  },
  { immediate: true }
)

const activeIndex = ref('timeLapse')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
  activeIndex.value = key
}
const onCheckCameraChange = (val) => {
  videoList.value = val
}
</script>

<template>
  <div class="flex justify_between w-100 h-100 p-20px">
    <el-card class="left-Card" :style="{ width: leftCardW + '%' }" style="height: 100%">
      <template #header>
        <div class="card-header">
          <span>左侧板块</span>
        </div>
      </template>
    </el-card>
    <el-card class="center-card" :style="{ width: centerCardW + '%' }"> </el-card>
    <el-card class="right-Card" :style="{ width: rightCardW + '%' }">
      <template #header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
        >
          <el-menu-item index="timeLapse">分类1</el-menu-item>
          <el-menu-item index="fillLight">分类2</el-menu-item>
          <!-- <el-menu-item index="2-2">ICR</el-menu-item> -->
        </el-menu>
      </template>
      <template v-if="activeIndex === 'timeLapse'"> </template>
      <template v-if="activeIndex === 'fillLight'"> </template>
    </el-card>
  </div>
</template>
<style scoped>
.left-Card :deep(.el-card__body) {
  height: 100%;
  padding: 0 20px;
}
.right-Card :deep(.el-card__header) {
  padding: 0;
}
.center-card :deep(.el-card__body) {
  height: 100%;
  padding: 2px;
}
.right-Card :deep(.el-card__body) {
  height: 100%;
  padding: 2px;
}
</style>>